<template>
	<div>
		<el-collapse v-model="activeName">
			<el-collapse-item title="" name="1">
				<template slot="title">
					<span style="padding-left: 10px">更多操作</span>
				</template>
				<el-card shadow="always" :body-style="{ padding: '10px' }">
					<el-form
						:model="product"
						ref="form"
						label-width="80px"
						:inline="true"
					>
						<el-form-item label="商品名称">
							<el-input
								v-model="product.name"
								placeholder="请输入搜索商品名称"
							></el-input>
						</el-form-item>
						<el-form-item label="店铺名称">
							<el-input
								v-model="product.shop"
								placeholder="请输入搜索店铺名称"
							></el-input>
						</el-form-item>
						<el-form-item>
							<el-button
								type="primary"
								@click="onSearchSubmit"
								size="small"
								icon="el-icon-search"
								>搜索</el-button
							>
							<el-button
								size="small"
								icon="el-icon-refresh"
								type="success"
								>重置</el-button
							>
						</el-form-item>
					</el-form>

					<el-button
						type="warning"
						@click="onBatchDelete"
						size="mini"
						v-permision="['RemoveShop']"
						icon="el-icon-delete"
						>批量删除</el-button
					>
				</el-card>
			</el-collapse-item>
		</el-collapse>

		<!-- 
       border	是否带有纵向边框 
       stripe	是否为斑马纹 table
       -->
		<el-table
			:data="productList"
			border
			stripe
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="55"> </el-table-column>
			<el-table-column prop="id" label="序号" width="80">
			</el-table-column>
			<el-table-column prop="shop" label="店铺名称"> </el-table-column>
			<el-table-column prop="product" label="商品名称"> </el-table-column>
			<el-table-column prop="picture" label="图片">
				<template v-slot="scope">
					<!-- 可通过lazy开启懒加载功能，当图片滚动到可视范围内才会加载 -->
					<el-image
						:src="scope.row.picture | urlFilter"
						lazy
						style="width: 100px; height: 100px"
					>
						<div slot="error" class="image-slot">
							<i class="el-icon-picture-outline"></i>
						</div>
					</el-image>
				</template>
			</el-table-column>
			<el-table-column prop="price" label="价格"> </el-table-column>
			<el-table-column prop="categoryname" label="分类">
			</el-table-column>
			<el-table-column label="操作">
				<!-- scope.row 表示选中行数据对象 -->
				<template v-slot="scope">
					<el-button
						type="warning"
						size="small"
						@click="onDelete(scope.row.id)"
						v-permision="['RemoveShop']"
						>删除</el-button
					>
					<el-button
						type="success"
						size="small"
						v-permision="['EditShop']"
						@click="onEdit(scope.row.id)"
						>编辑</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<!-- 
			total: 总记录条数， 来自商品列表接口
			current-page: 当前页号, 随当前页号操作变化
		 -->
		<el-pagination
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
			:current-page="currentNo"
			:page-sizes="[5, 10, 20, 30, 40]"
			:page-size="pageSize"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		>
		</el-pagination>

		<!-- 编辑商品界面 -->
		<el-dialog
			title="编辑商品"
			:visible.sync="dialogVisible"
			width="50%"
			:before-close="handleClose"
		>
			<el-form :model="productForm" ref="productForm" label-width="100px">
				<!-- 商品名称 -->
				<el-form-item label="商品名称" prop="name">
					<el-input v-model="productForm.name"></el-input>
				</el-form-item>
				<!-- 店铺名称 -->
				<el-form-item label="店铺名称" prop="shop">
					<el-input v-model="productForm.shop"></el-input>
				</el-form-item>
				<!-- 分类 -->
				<el-form-item label="商品分类">
					<el-select
						v-model="productForm.categoryId"
						placeholder="请选择商品分类"
					>
						<el-option
							v-for="category in categoryList"
							:key="category.id"
							:label="category.name"
							:value="category.id"
						></el-option>
					</el-select>
				</el-form-item>

				<!-- 价格 -->
				<el-form-item label="价格">
					<el-input v-model="productForm.price"></el-input>
				</el-form-item>
				<!-- 原价 -->
				<el-form-item label="原价">
					<el-input v-model="productForm.oldprice"></el-input>
				</el-form-item>
				<!-- 上下架 -->
				<el-form-item label="上下架">
					<el-radio-group v-model="productForm.putaway">
						<el-radio label="1">上架</el-radio>
						<el-radio label="0">下架</el-radio>
					</el-radio-group>
				</el-form-item>
				<!-- 描述 -->
				<el-form-item label="描述">
					<el-input
						v-model="productForm.detail"
						type="textarea"
					></el-input>
				</el-form-item>
				<!-- 图片 -->
				<el-form-item label="图片">
					<!-- <el-image
						:src="productForm.picture|urlFilter"
						fit="fill"
						:lazy="true"
						style="width: 100px"
					></el-image> -->

					<!-- auto-upload false 选中文件不上传 -->
					<el-upload
						:auto-upload="false"
						name="headerImg"
						class="avatar-uploader"
						action=""
						:show-file-list="false"
						:before-upload="beforeAvatarUpload"
						:on-change="onChangeFile"
					>
						<img
							v-if="productForm.picture"
							:src="productForm.picture | urlFilter"
							class="avatar"
						/>
						<img
							v-else-if="imageUrl"
							:src="imageUrl"
							class="avatar"
						/>
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="onEditSubmit"
						>确定</el-button
					>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import {
	RequestProductList,
	RequestProductDeleteById,
	RequestProductBatchDelete,
	RequestProductById,
	RequestCategoryList,
	RequestProductUpdate,
	RequestUploadFile
} from '@/api/product'
export default {
	data() {
		return {
			activeName: '1',
			productList: [],
			total: 0, //总记录条数
			currentNo: 1, //当前页号
			pageSize: 5, // 第页记录条数
			ids: [], //批量删除元素id
			product: {
				name: '',
				shop: ''
			},
			dialogVisible: false, //默认隐藏弹出对话框
			productForm: {
				id: 0,
				name: '',
				shop: '',
				categoryId: '',
				price: '',
				oldprice: '',
				detail: '',
				putaway: '0',
				picture: ''
			},
			categoryList: [], // 分类列表
			imageUrl: '', // 图片预览地址
			headerimgFile: null // 本地上传图片对象
		}
	},
	created() {
		this.getProductList()
	},

	methods: {
		/**
		 * 删除商品
		 *  1. 弹出删除提示框
		 *  2. 调用删除接口
		 *  3. 刷新商品列表
		 */
		onDelete(id) {
			// 1. 弹出删除提示框
			this.$confirm('确定要删除该商品吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				//2. 调用删除接口
				RequestProductDeleteById(id).then(data => {
					if (data.resultCode === 1) {
						this.$message('删除成功!')
						//3. 刷新商品列表
						this.getProductList()
					}
				})
			})
		},
		//页码改变事件
		handleSizeChange(val) {
			this.pageSize = val
			this.currentNo = 1
			this.getProductList()
		},
		//当前页号改变事件
		handleCurrentChange(val) {
			this.currentNo = val
			this.getProductList()
		},
		/**
		 * 获取商品列表
		 */
		getProductList() {
			RequestProductList(
				this.currentNo,
				this.pageSize,
				this.product.shop.trim(),
				this.product.name.trim()
			).then(data => {
				let { resultCode, resultInfo } = data
				if (resultCode === 1) {
					this.productList = resultInfo.list // 商品列表
					this.total = resultInfo.total // 总记录条数
				}
			})
		},
		/**
		 * 多选
		 *  val 数组，数组元素是选中商品对象
		 *  [{id:1,name:''},{id:2,name:''}]
		 *  [1,2] => '1,2'
		 */
		handleSelectionChange(val) {
			let ids = val.map(item => item.id)
			this.ids = ids
		},
		/**
		 * 批量删除
		 */
		onBatchDelete() {
			this.$confirm('确定要删除该商品吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				//2. 调用删除接口
				let ids = this.ids.join(',')
				RequestProductBatchDelete(ids).then(data => {
					if (data.resultCode === 1) {
						this.$message('删除成功!')
						//3. 刷新商品列表
						this.getProductList()
					}
				})
			})
		},
		/**
		 * 搜索
		 */
		onSearchSubmit() {
			this.getProductList()
		},
		/**
		 * 弹出对话框事件
		 */
		handleClose(done) {
			done()
		},
		/**
		 * 编辑按钮事件
		 */
		onEdit(id) {
			this.dialogVisible = true // 控制弹出编辑对话框
			this.showProductEdit(id)
		},
		/**
		 * 显示编辑商品内容
		 */
		async showProductEdit(id) {
			// 商品分类列表
			let categoryData = await RequestCategoryList()
			if (categoryData.resultCode === 1) {
				let list = categoryData.resultInfo.list
				this.categoryList = list
			}

			// 查询商品
			let productData = await RequestProductById(id)
			let { resultCode, resultInfo } = productData
			if (resultCode === 1) {
				this.productForm = {
					id: resultInfo.id,
					name: resultInfo.product,
					shop: resultInfo.shop,
					categoryId: resultInfo.category_id,
					price: resultInfo.price,
					oldprice: resultInfo.oldprice,
					detail: resultInfo.detail,
					putaway: resultInfo.putaway + '',
					picture: resultInfo.picture
				}
			}
		},
		/**
		 * 编辑提交
		 */
		async onEditSubmit() {
			// 增加编辑图片功能
			console.log('this.headerimgFile ', this.headerimgFile)
			//没有选本修改图片逻辑处理
			if (this.headerimgFile) {
				let formdata = new FormData()
				formdata.append('headerImg', this.headerimgFile)
				let headerData = await RequestUploadFile(formdata)
				if (headerData.resultCode === 1) {
					let headerUrl = headerData.resultInfo.url

					// 编辑商品
					let product = this.productForm
					product = { ...product, picture: headerUrl }
					let data = await RequestProductUpdate(product)
					if (data.resultCode === 1) {
						// 刷新商品列表界面
						this.getProductList()
					}
				}
			} else {
				let product = this.productForm
				let data = await RequestProductUpdate(product)
				if (data.resultCode === 1) {
					// 刷新商品列表界面
					this.getProductList()
				}
			}

			this.dialogVisible = false
		},
		/**
		 * 图片上传之前
		 */
		beforeAvatarUpload(file) {},
		/**
		 * 选中本图片触发
		 */
		onChangeFile(file) {
			this.productForm.picture = ''
			this.imageUrl = URL.createObjectURL(file.raw)
			this.headerimgFile = file.raw
		}
	}
}
</script>

<style lang="scss" scoped>
.el-collapse-item__header {
	padding: 10px;
}
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>